<template>
	<div class="index">
		<div class="goods">
			<img class="goodsImg" :src="groupInfo.logoUrl" />
			<div class="goodsInfo">
				<div class="goodsInfoFirstDiv">
					<span class="goodsName">{{groupInfo.templateTitle}}</span>
					<span :style="{color:textColor}" class="personNum">参与人数：{{groupInfo.participationNum}}</span>
				</div>
				<div class="oldPrice">原价：{{groupInfo.originalPrice}}/人</div>
				<div class="courseNum">课程数：{{groupInfo.classHours}}节</div>
				<div style="display:flex;justify-content: space-between;align-items: center;">
					<div class="curPrice">团购价：{{groupInfo.currentPrice}}/人</div>
					<van-button v-show="groupInfo.joiningGroupStatus !== 2 && users.length !== 0" @click="handleShare" class="smallDangerBtn" size="small" type='danger'>邀请好友</van-button>
				</div>
			</div>
		</div>
		<div class="person" v-show="users && users.length > 0">
			<img v-for="(item,i) in users" :key='i' :src="item.headImgUrl" class="personItem" />
			<div @click="handleShare" v-for="index in (groupInfo.differenceNum)" :key='index' class="addPerson personItem">+</div>
		</div>
		<div class="connectionInfo">
			<div class="left">
				<div class="infoItem">活动地点：{{groupInfo.addr}}</div>
				<div class="infoItem">联系人：{{groupInfo.contactPerson}}</div>
				<div style="display: flex;align-items: center;">联系方式：
				<a :style="{color:textColor}" class="phone" :href="'tel:' + groupInfo.contactDetails">
					{{groupInfo.contactDetails}}
				</a>  
				<a :href="'tel:' + groupInfo.contactDetails">
					<img src="../assets/images/phone.png" />
				</a>
				</div>
			</div>
			
			<div v-if="groupInfo.isJoinGroup === 1 && isShare && users.length !== 0" class="joinBtn">
				<van-button @click='joiningGroup' class="smallDangerBtn" type="danger" size="small">参与拼团</van-button>
			</div>
			<div v-else>
				<img class="QRCode" :src="groupInfo.contactQrCode" />
			</div>
		</div>
	</div>
</template>


<script>
	import {
		Toast,Dialog
	} from 'vant'
	import share from '../weixin/share.js'
	const serviceAPI = require('@/serviceAPI.js')
	export default {
		data() {
			return {
				isShare:false,//是否是点击分享进来的
				// showGuide:false,
				users: [],
				groupCode: '',
				jssdkConfigInfo: {},
				groupInfo: {},
				textColor: '#4f9fef',
			}
		},
		props: {
			activeInfo: Object, //活动详情
		},
		async created() {
			if (location.href.indexOf('groupCode') !== -1) { // 点击分享链接
				this.isShare = true
				const hrefArr = location.href.split('groupCode=')
				this.groupCode = hrefArr && hrefArr[hrefArr.length - 1]
				this.getShareGroupInfo()
			} else {
				this.isShare = false
				if(this.activeInfo.isJoinGroup === 2) this.getGroupInfoOpen()
				
				this.groupInfo = this.activeInfo.templateModel
			}
		},
		methods: {
			// 加入团
			async joiningGroup() {
				let res = await this.$axios.post(serviceAPI.joiningGroup, {
					openId: localStorage.getItem('openId'),
					groupCode: this.groupCode
				})
				if (res.data.code === 10000) {
					Toast.success('入团成功')
					this.show = true
					this.getGroupInfoOpen()
				}
			},
			async getShareGroupInfo() {
				if (localStorage.getItem('openId') && this.groupCode) {
					const res = await this.$axios.post(serviceAPI.getShareGroupInfo, {
						groupCode: this.groupCode,
						openId: localStorage.getItem('openId')
					})
					// 我得otIGG6CacfcWOZMuusiauprwcNVY
					if (res.data.code === 10000) {
						this.groupInfo = res.data.data
						this.users = res.data.data.users
					}
				}



			},
			async handleShare() {
				Dialog.alert({
					message: '点击右上角分享',
					theme: 'round-button',
				}).then(async () => {
					await this.getConfigInfo()
					try {
						let linkUrl = ''
						if(window.location.href.indexOf('?code') !== -1){
							const hrefArr = window.location.href.split('?code')
							const hrefArr2 = hrefArr.split('#/')
							window.location.href = hrefArr[0] +'#/' + hrefArr2[1]
							linkUrl = hrefArr[0] +'#/' + hrefArr2[1]
						}else{
							linkUrl = window.location.href
						}
						if(window.location.href.indexOf('groupCode') === -1){
							linkUrl = linkUrl + '?groupCode=' + this.groupInfo.groupCode
						}
						share({ ...this.jssdkConfigInfo,
							title: this.activeInfo.activityTitle,
							desc: this.groupInfo.templateTitle,
							imgUrl: this.groupInfo.logoUrl,
							link: linkUrl
						})
					} catch (e) {
						alert('11错误=============')
						alert(e)
						//TODO handle the exception
					}
				});
				// this.showGuide = true
				
			},
			// 获取jssdk配置信息
			async getConfigInfo() {
				const res = await this.$axios.post(serviceAPI.getConfigInfo, {
					url: window.location.href
				})
				if (res.data.code === 10000) {
					this.jssdkConfigInfo = res.data.data
				}
			},
			// 获取拼团信息（开团）
			async getGroupInfoOpen() {
				const res = await this.$axios.post(serviceAPI.groupInfo, {
					openId:localStorage.getItem('openId'),
					// openId: 'otIGG6CacfcWOZMuusiauprwcNVY',
					activityCode: this.activeInfo.activityCode
				})
				if (res.data.code === 10000) {
					// Toast.success('开团成功')
					this.groupInfo = res.data.data
					this.users = res.data.data.users
				} else {
					Toast.fail(res.data.message)
				}
			},
		}
	}
</script>

<style scoped>
	.guiderWrapper {
		position: relative;
	}

	.guiderWrapper .van-button {
		position: absolute;
		bottom: 12vh;
		left: 43vw;
	}

	.guiderWrapper img {
		width: 100vw;
		height: 100vh;
	}

	.helpPersonList {
		display: flex;
		justify-content: space-between;
		margin-top: 0.4375rem;
		align-items: center;
	}

	.helpPersonLeft {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.helpPersonLeft img {
		width: 2.75rem;
		height: 2.75rem;
		object-fit: cover;
		margin-right: 0.7125rem;
		border-radius: 50%;
	}

	.helpedBtn {
		color: white;
		background-color: #ccc;
	}

	.van-button--small {
		height: 28px;
	}

	.smallDangerBtn {
		padding: 0 13px;
		border-radius: 7px !important;
	}

	.van-popup {
		background: transparent;
		background-color: rgba(255, 255, 255, 0.8);
	}

	/* .van-overlay{
		background: no-repeat;
	} */
	.bg {
		width: 100%;
		height: 80vh;
		object-fit: fill;
	}

	.operateBtn {
		position: absolute;
		bottom: 8rem;
		z-index: 99;
		padding: 10rpx;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.operateBtn button {
		display: block;
		margin-top: 0.625rem;
		padding: 10px 50px;
		-moz-box-shadow: 0px 1px 6px #858585;
		-webkit-box-shadow: 0px 1px 6px #858585;
		box-shadow: 0px 1px 6px #858585;
	}

	.operateBtnItem {
		color: white;
		font-weight: bold;
		border-radius: 8px;
		outline: none;
		border: none;
		background-color: red;
	}

	.infoitem {
		font-size: 0.875rem;
		color: #000000;
		font-weight: 700;
	}

	.connectionInfo {
		padding: 0.625rem;
		padding-top: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 13px;
		background: white;
		line-height: 22px;
		height: 16vh;
		margin: 0 0.5rem 0.4rem 0.5rem;
	}

	.QRCode {
		width: 100px;
		height: 100px;
		object-fit: cover;
	}

	.joinBtn {
		height: 100px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.confirm {
		display: flex;
		justify-content: space-between;
		padding: 0.8rem;
		font-size: 14px;
	}

	.confirm span:nth-child(1) {
		color: red;
		font-weight: 700;
	}

	.confirm span:nth-child(2) {
		font-weight: 700;
	}

	.goods {
		background: white;
		padding: 0.825rem;
		display: flex;
		margin: 0 0.5rem 0.4rem 0.5rem;
	}

	.goodsImg {
		border-radius: 8px;
		flex: 3;
		width: 100px;
		height: 95px;
		object-fit: cover;
		margin-right: 0.7125rem;
	}

	.goodsInfo {
		flex: 7;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.goodsInfoFirstDiv {
		display: flex;
		justify-content: space-between;
	}

	.goodsName {
		font-weight: 600;
		font-size: 14px;
	}

	.personNum {
		font-size: 13px;
	}

	.oldPrice {
		color: #FF0000;
		text-decoration: line-through;
		font-size: 14px;
	}

	.courseNum {
		font-size: 13px;
	}

	.curPrice {
		font-size: 14.2px;
		font-weight: 700;
		color: #FF0000;
	}

	.helpInfo {
		display: flex;
		justify-content: space-between;
		width: 100%;
		margin-bottom: 0.4375rem
	}

	.helpBtn {
		margin-top: 0.525rem;
		display: flex;
		justify-content: space-between;
	}

	.person {
		display: flex;
		justify-content: space-around;
		padding: 0.625rem 0.3rem;
	}

	.personItem {
		border-radius: 50%;
		border: 1px solid #eee;
		width: 3.75rem;
		height: 3.75rem;
	}

	.addPerson {
		background: white;
		text-align: center;
		line-height: 3.75rem;
		font-size: 41px;
		color: #eee;
	}

	.person img {
		width: 3.75rem;
		height: 3.75rem;
		object-fit: cover;

	}
</style>
